<template>
<div id="AAA">
  <p>能力创建</p>
   <div id="topA" ref="topA" @click="goCapCreation"> </div>
   </div>
</template>
<script>
import * as echarts from 'echarts';
import {getindex} from "@/api/statistics/statistics";
export default {
  mounted() {
    
    var myChart = echarts.init(this.$refs.topA);
    let va;
    getindex().then(res => {
      va= res.data.createList
      console.log(res.data.createList)
      let option = {
        title: {
          show: true,
          text: "Total:"+res.data.cteateTotal,
          subtext: "▲ "+res.data.createTrend+"%",
          // text: "颜色字体长一点能好看",
          left: "20",
          top: "1",
          itemGap:10,
          textStyle: {
            fontSize: 35
          },
          subtextStyle: {
            color: 'rgb(16,193,27)',
            fontSize: 18,
            show: true,
            shadowColor: 'rgba(1,16,255, 0.6)',
            shadowBlur:30,
            shadowOffsetY:10,
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          show: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon','Sun', 'Mon'],
        },
        yAxis: {
          type: 'value',
          show: false,

        },
        series: [
          {
            data: va,
            type: 'line',
            smooth: true,
            symbol: "none",
            itemStyle: {
              normal: {
                color: '#a80000',
                lineStyle: {
                  color: 'rgb(16,193,27)',
                  width: 5,
                  shadowColor: 'rgba(0,255,15,0.7)',
                  shadowBlur: 17 //折线粗细
                }
              }
            }
          }
        ]
      };

      option && myChart.setOption(option, true)
    })


  },
  methods: {
   
    goCapCreation() {
      this.$router.push('/capCreation')
    }
  }

};
</script>

<style lang="scss" scoped>
#AAA{
  width: 32%;
  margin: 9px;
  height:260px;
  margin-top: 15px;
  border-radius: 13px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
  p{
    font-size:18px;
    color: gray;
    height:20px;
    line-height: 20px;
    margin:0;
    padding:0;
    margin-left:20px;
    margin-top:10px;
    font-weight: 600;
    margin-bottom:5px;
  }

}
#topA {
  width: 100%;
  height: 225px;
  background:white;
  border-radius: 13px;
  padding:0;
  &:hover {
    background: linear-gradient(to top, rgb(241, 245, 238), #ffffff);
  }

}

</style>
